<template>
  <n-layout class="h-[100vh] p-4">
    <!-- 顶部状态栏 -->
    <n-grid :cols="4" :x-gap="16" class="mb-4">
      <!-- 实时视频流 -->
      <n-gi :span="3">
        <n-card title="实时画面" :bordered="false">
          <div class="h-48 bg-gray-100 rounded flex-center">
            <img src="../../assets/飞机.jpg" alt="" style="height:250px">
          </div>
        </n-card>
      </n-gi>
      <!-- 状态信息 -->
      <n-gi>
        <n-card title="飞行状态" :bordered="false">
          <n-statistic label="飞行时间" class="mb-2">00:12:34</n-statistic>
          <n-statistic label="飞行高度">128.6 m</n-statistic>
          <n-statistic label="水平速度">15.6 m/s</n-statistic>
          <n-statistic label="电池电量">
            <n-progress type="line" :percentage="89" />
          </n-statistic>
        </n-card>
      </n-gi>
    </n-grid>

    <!-- 主控制区 -->
    <n-grid :cols="5" :x-gap="16">
      <!-- 地图显示 -->
      <n-gi :span="3">
        <n-card title="飞行地图" :bordered="false">
          <div class="h-96 bg-gray-100 rounded flex-center">
            <img src="../../assets/飞机.jpg" alt="" style="height:89px">
        </div>
        </n-card>
      </n-gi>

      <!-- 控制面板 -->
      <n-gi :span="2">
        <n-card title="飞行控制" :bordered="false">
          <n-space vertical>
            <n-button-group class="mb-4">
              <n-button type="primary" round @click="handleTakeoff">
                起飞
              </n-button>
              <n-button type="warning" round @click="handleLand">
                降落
              </n-button>
              <n-button type="error" round class="mt-4" @click="emergencyStop">
              悬停
              </n-button>
            </n-button-group>
          </n-space>
        </n-card>
      </n-gi>
    </n-grid>
  </n-layout>
</template>
<script setup>
import {
  NLayout,
  NGrid,
  NGi,
  NCard,
  NStatistic,
  NProgress,
  NButton,
  NButtonGroup,
  NSpace,
} from 'naive-ui'


// 控制逻辑
const handleTakeoff = () => console.log('Takeoff')
const handleLand = () => console.log('Land')
const emergencyStop = () => console.log('Emergency Stop')

</script>

<style>

</style>